<template>
	<u-popup v-model="show_popup" mode="bottom" @close="closePopup">
		<view class="unlock_pop">
			<view class="top">
				<view class="title">{{title}}</view>
				<view class="price">0元</view>
			</view>
			<view class="pay_method">
				<view class="pay_title">支付方式</view>
				<view class="pay_cont">
					<view class="item" :class="{active:provider=='wxpay'}" @tap="payClick('wxpay')">微信支付</view>
					<view class="item" :class="{active:provider=='alipay'}" @tap="payClick('alipay')">支付宝支付</view>
				</view>
			</view>
			<button type="default" class="submit">{{btnText}}</button>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props:{
			title:String,
			btnText:String,
			show:Boolean
		},
		watch:{
			show(val,old){
				this.show_popup = val
			}
		},
		data() {
			return {
				provider:'',//支付方式
				show_popup:false
			}
		},
		methods: {
			closePopup(){
				this.$emit('close',false)
			},
			// 选择支付方式
			payClick(e){
				this.provider = e
			},
		}
	}
</script>

<style lang="scss" scoped>
	.unlock_pop{
		padding: 40rpx 20rpx 35rpx 20rpx;
		.top{
			text-align: center;
			margin-bottom:40rpx;
			.title{
				font-size: 26rpx;
				font-weight: 400;
				color: #999999;
				line-height: 37rpx;
			}
			.price{
				font-size: 72rpx;
				font-weight: 400;
				color: #333333;
				line-height: 100rpx;
				margin-top: 15rpx;
			}
		}
		.pay_method{
			padding-bottom: 110rpx;
			.pay_title{
				font-size: 30rpx;
				font-weight: 400;
				color: #666666;
				line-height: 42rpx;
			}
			.pay_cont{
				margin-top: 24rpx;
				.item{
					padding: 24rpx 0;
					border-bottom: 1px solid #E6E6E6;
					padding-left:72rpx;
					background: url(../static/image/ico/wxzf.png)left center no-repeat;
					background-size: 48rpx 48rpx;
					position:relative;
				}
				.item:nth-child(2){
					background: url(../static/image/ico/zfb.png)left center no-repeat;
					background-size: 48rpx 48rpx;
				}
				.active{
					&::after{
						content: '';
						width: 34rpx;
						height: 34rpx;
						background: url(../static/image/ico/xz.png)center center no-repeat;
						background-size: 34rpx 34rpx;
						position: absolute;
						right: 0;
						top:calc(50% - 17rpx)
					}
				}
			}
		}
		.submit{
			height: 100rpx;
			background: #4A90E2;
			border-radius: 50rpx;
			font-size: 34rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 100rpx;
			&::after{
				border: 0;
			}
		}
	}
</style>
